<template>
    <div :class="config.attributes?.cssClass" v-show="!config.attributes.hidden" class="row-flex-container" :style="flexStyle">
        <div class="row-flex-runtime">
            <component v-for="element in config.children" :key="element.id" :is="designer.renderComponent(element)"
                :config="element" />
        </div>
    </div>
</template>

<script setup>
import { inject, computed } from 'vue'

const props = defineProps({
    config: {
        type: Object,
        required: true
    }
})

const designer = inject('designer')

const flexStyle = computed(() => {
    const { justify, align, gap, wrap } = props.config.attributes
    return {
        display: 'flex',
        flexWrap: wrap ? 'wrap' : 'nowrap',
        justifyContent: mapJustify(justify),
        alignItems: mapAlign(align),
        gap: gap || '10px'
    }
})

function mapJustify(val) {
    return {
        start: 'flex-start',
        center: 'center',
        end: 'flex-end',
        'space-between': 'space-between',
        'space-around': 'space-around'
    }[val] || 'flex-start'
}

function mapAlign(val) {
    return {
        start: 'flex-start',
        center: 'center',
        end: 'flex-end'
    }[val] || 'flex-start'
}
</script>

<style scoped>
.row-flex-container {
    box-sizing: border-box;
    margin: 5px 0;
}

.row-flex-runtime {
    display: flex;
    flex-wrap: inherit;
    gap: inherit;
    width: 100%;
}
</style>